import './style.css'
const indicators = document.querySelector('.indicators')
const items = document.querySelectorAll('.content-item')
const prev = document.querySelector('#prev-btn')
const next = document.querySelector('#next-btn')
let active = 0
const indicator_items = createIndicator(items.length, active)

function createIndicator (total, current) {
  const ele = []
  for (let i = 0; i < total; i++) {
    ele.push(`<span class="indicator ${i == current ? 'active' : ''}"></span>`)
  }
  indicators.innerHTML = ele.join('')
  return document.querySelectorAll('.indicator')
}

function updateActive (index) {
  items[active].classList.remove('active')
  indicator_items[active].classList.remove('active')
  active = (index + items.length) % items.length
  items[active].classList.add('active')
  indicator_items[active].classList.add('active')
}
prev.addEventListener('click', () => updateActive(active - 1))
next.addEventListener('click', () => updateActive(active + 1))
indicator_items.forEach((item, index) => {
  item.addEventListener('click', () => updateActive(index))
})